<template>
  <ul class="menu w-40 bg-base-100" @click="onClick">
    <li v-for="i in items" :key="i.key" :data-key="i.key">
      <slot :item="i">
        <a>
          <span class="h-6 w-6" :class="i.icon"></span>
          <span> {{ i.label }}</span>
        </a>
      </slot>
    </li>
  </ul>
</template>
<script setup lang="ts">
interface MenuItem {
  key: string;
  label: string;
  icon: string;
}

interface Props {
  items: MenuItem[];
}
defineProps<Props>();
const emit = defineEmits<{
  selected: [key: string];
}>();

const onClick = (e: Event) => {
  const key = (e.target as HTMLElement)
    .closest("[data-key]")
    ?.getAttribute("data-key");
  if (key) emit("selected", key);
};
</script>
